<template>
    <view>
        <view class="concern">
            <view class="list">
                <view class="list_left">
                    <image src="/static/img/img01.png" class="img"></image>
                    <view class="content">
                        <view class="title">圈圈</view>
                        <view class="des">近期作品:《致橡树》</view>
                    </view>
                </view>
                <view class="list_right">
<!--                    <image src="/static/img/queren.png" class="img"></image>-->
                    <text class="iconfont begin_1">&#xe61b;</text>
                    <view class="guan_zhu">已关注</view>
                </view>
            </view>
            <view class="list">
                <view class="list_left">
                    <image src="/static/img/img01.png" class="img"></image>
                    <view class="content">
                        <view class="title">圈圈</view>
                        <view class="des">近期作品:《致橡树》</view>
                    </view>
                </view>
                <view class="list_right">
<!--                    <image src="/static/img/huxiangguanzhu.png" class="img"></image>-->
                    <text class="iconfont begin_b">&#xe616;</text>
                    <view class="guan_zhu">互相关注</view>
                </view>
            </view>
            <view class="list">
                <view class="list_left">
                    <image src="/static/img/img01.png" class="img"></image>
                    <view class="content">
                        <view class="title">圈圈</view>
                        <view class="des">近期作品:《致橡树》</view>
                    </view>
                </view>
                <view class="list_right">
<!--                    <image src="/static/img/huxiangguanzhu.png" class="img"></image>-->
                    <text class="iconfont begin_b">&#xe616;</text>
                    <view class="guan_zhu">互相关注</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang='scss'>
    .concern{
        padding: 0upx 55upx;
        .list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2upx solid #f2f2f2;
            padding: 39upx 0;
            .list_left{
                display: flex;
                align-items: center;
                .img{
                    width: 100upx;
                    height: 100upx;
                    border-radius: 50%;
                }
                .content{
                    padding-left: 20upx;
                    .title{
                        font-size: $uni-font-size-base;
                        color: $uni-color-664e37;
                    }
                    .des{
                        padding-top: 8upx;
                        font-size: $uni-font-size-14;
                        color: $uni-color-876a48;
                    }
                }
            }
            .list_right{
                width: 170upx;
                height: 60upx;
                border-radius: 30upx;
                border: 2upx solid $uni-color-876a48;
                display: flex;
                justify-content: center;
                align-items: center;
                .begin_1{
                    font-size: 16upx;
                    color: $uni-color-876a48;
                }
                .begin_b{
                    font-size: 20upx;
                    color: $uni-color-876a48;
                }
                .guan_zhu{
                    font-size: $uni-font-size-14;
                    color: $uni-color-876a48;
                    padding-left: 5upx;
                }
            }
        }
    }

</style>